import React, { useState, useEffect } from 'react';
import {
  Layout,
  Card,
  Row,
  Col,
  Typography,
  Statistic,
  Button,
  Form,
  Input,

} from 'antd';
import {
  UserOutlined,
  BarChartOutlined,
  ShoppingCartOutlined,
  DollarCircleOutlined,

} from '@ant-design/icons';
import { Link, Outlet, } from 'react-router-dom';

const { Content } = Layout;
const { Title } = Typography;
import useCountStore from '@/store/count/count.js';
import ToDoFilter from './ToDoFilter.jsx';

import ToDoLi from './ToDoLi.jsx';
import withFilter from './withFilter.jsx';
const HocFilterLi = withFilter(ToDoLi)


// useCallback(()=>{
//   fetchTreeList()
// })

const Dashboard = () => {
  const [listStatus, setListStatus] = useState('all');
  const [userList, setUserList] = useState([
    { id: 1, name: '张三', age: 20, status: 0 },
    { id: 2, name: '李四', age: 25 },
  ]);

  const delItem = (id) => {
    // userList.find(item=>item.id==id).status=0
    const arr = userList.map((item) =>
      item.id == id ? { ...item, status: 0 } : item
    );
    setUserList(arr);
    // show()
    // showUnFinish()
  };
  const showAll = () => {
    // setUserList(userAllList.map(item=>item))
    setListStatus('all');
  };
  const showFinish = () => {
    // setUserList(userAllList.filter(item=>item.status==0))
    setListStatus('done');
  };
  const showUnFinish = () => {
    setListStatus('pending');
    // setUserList(userAllList.filter(item=>item.status==undefined))
  };

  const UserListEl = () => (
    <Card
      title="列表"
      variant="borderless"
      className="mt-4"
      style={{ width: 300 }}
    >
      <Button onClick={showAll}>全部</Button>
      <Button onClick={showFinish}>已完成</Button>
      <Button onClick={showUnFinish}>未完成</Button>
      <ul>
        <ToDoFilter list={userList} filter={listStatus} delItem={delItem} />
      </ul>
       
    </Card>
  );
  // useEffect(()=>{
  //   UserListEl()
  // },[userList,listStatus])
  const onFinish = (values) => {
    console.log('onFinish');
    setUserList(
      userList.concat({
        ...values,
        id: userList[userList.length - 1].id + 1,
      })
    );
    //    showAll()
    // showUnFinish()
    // showFinish()
  };
  const QueryForm = () => (
    <div>
      <Form
        name="query"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        style={{ maxWidth: 600 }}
        initialValues={
          {
            // remember: true
            // login_name: '',
            // login_pwd: '',
          }
        }
        onFinish={onFinish}
        // onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item
          label="用户名"
          name="name"
          rules={[{ required: true, message: '请输入用户名!' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="年龄"
          name="age"
          rules={[{ required: true, message: '请输入年龄!' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item label={null}>
          <Button type="primary" htmlType="submit">
            添加
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
  const { treeList, fetchTreeList } = useCountStore();
  useEffect(() => {
    fetchTreeList();
  }, [fetchTreeList]); // 只在组件挂载时执行一次 如果确定 fetchTreeList 是稳定的函数引用，也可以使用空依赖数组：否则 [fetchTreeList]  依赖fetchlist变化调用

  return (
    <Layout style={{ minHeight: '100%' }}>
      <Content style={{ padding: '24px' }}>
        <Title level={2}>仪表盘</Title>

        {/* 统计卡片 */}
        <Row gutter={16} style={{ marginBottom: '24px' }}>
          <Col span={6}>
            <Card>
              <Statistic
                title="用户数"
                value={1234}
                prefix={<UserOutlined />}
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <ul>
        {/* <ToDoFilter list={userList} filter={listStatus} delItem={delItem} /> */}
     <HocFilterLi list={userList} filter={listStatus} delItem={delItem} />
      </ul>
            </Card>
          </Col>
          <Col span={6}>
          <Link to="/kpi">
           绩效考核
            </Link>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="访问量"
                value={4321}
                prefix={<BarChartOutlined />}
              />
            </Card>
          </Col>
        </Row>
                <UserListEl />
        <div>
          <QueryForm />
          {/* <Button type="primary">添加</Button> */}
        </div>
        {/* 快捷操作 */}
        <Card title="快捷操作" style={{ marginBottom: '24px' }}>
          <Row gutter={16}>
            <Col span={4}>
              <Link to="overview">
                <Button type="primary" block>
                  概览
                </Button>
              </Link>
            </Col>
            {/* 可以添加更多快捷操作按钮 */}
          </Row>
        </Card>


        {/* 子路由内容区域 */}
        <Card title="详细内容">
          <div style={{ minHeight: '300px' }}>
            <div className="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
              <div>
                <div className="text-xl font-medium text-black">
                  Tailwind CSS 3.0
                </div>
                {Object.keys(treeList).length > 0 ? (
                  Object.entries(treeList).map(([key, value], index) => {
                    return (
                      <p key={index} className="text-slate-500">
                        {key}:{value}
                      </p>
                    );
                  })
                ) : (
                  <p className="text-slate-500">暂无数据</p>
                )}
              </div>
            </div>

            <Outlet />
          </div>
        </Card>

      </Content>
    </Layout>
  );
};

export default Dashboard;
